<template>
  <div id="advertising-space-detail" class="Row_content">
    <Row type="flex" justify="center">
      <Col>
        <div class="header-title">查看广告位详情</div>
        <div class="content-detail">
          <Form :label-width="110">
            <FormItem label="广告位名称：" prop="adPlaceName">
              <p>{{formValidate.adPlaceName}}</p>
            </FormItem>
            <FormItem label="广告位ID：" prop="adPlaceNo">
              <p>{{formValidate.adPlaceNo}}</p>
            </FormItem>
            <FormItem label="渠道：" prop="channelId">
              <p>{{ formValidate.channelId===0?"微信":formValidate.channelId===1?"一体机":formValidate.channelId===2?"刷卡器":formValidate.channelId===3?"收银台":formValidate.channelId===4?"口碑":formValidate.channelId===5?"美团":"" }}</p>
            </FormItem>
            <FormItem label="广告位类型：" prop="department">
              <p>{{ formValidate.adPlaceType===0?"Banner":formValidate.adPlaceType===1?"启动页全屏":formValidate.adPlaceType===2?"通栏":"" }}</p>
            </FormItem>
            <FormItem label="广告类型：" prop="orgCode">
              <p>{{ formValidate.adType===0?"静态图片":formValidate.adType===1?"视频":"" }}</p>
            </FormItem>
            <FormItem label="默认广告展示：" prop="mediaUrl">
              <img
                v-if="formValidate.adType===0"
                :src="formValidate.mediaUrl?formValidate.mediaUrl:defaultUrl"
                style="display: inline-block;width:96px;height:96px;vertical-align: top;"
                alt
              />
              <video
                v-if="formValidate.adType===1"
                :src="formValidate.mediaUrl?formValidate.mediaUrl:defaultUrl"
                controls="controls"
                style="display: inline-block;width:300px;height:200px;vertical-align: top;"
              ></video>
            </FormItem>
          </Form>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import { adplaceGet } from '@/api/advertising/index'
export default {
  name: 'advertising_space_detail',
  data () {
    return {
      formValidate: {},
      defaultUrl: ''
    }
  },
  created () {
    this.getadplaceGet()
  },
  methods: {
    // 查询单个广告位详情
    getadplaceGet () {
      adplaceGet({
        merchantId: this.$store.state.user.merchantId,
        adPlaceId: this.$route.params.id
      }).then(res => {
        if (res.data.status === 200) {
          this.formValidate = res.data.data
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
#advertising-space-detail {
  .header-title {
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #17233d;
    font-weight: bold;
    margin: 17px 36px;
  }
  .content-detail {
    font-size: 12px;
    margin-left: 64px;
    .ivu-form-item {
      margin-bottom: 0;
    }
  }
}
</style>
